@use 'sass:map';
@use '@angular/material' as mat;
@use '@gravitee/ui-particles-angular' as gio;

$typography: map.get(gio.$mat-theme, typography);

.card__group-endpoint {
  &__row {
    display: flex;
    align-items: center;

    &__type,
    &__name,
    &__target,
    &__weight,
    &__backup,
    &__tenant {
      flex: 1 1 auto;

      &__label {
        @include mat.typography-level($typography, subtitle-2);
      }

      &__label,
      &__hint {
        padding: 0 0.75em 0 0.75em;
      }

      &__form-field {
        width: 100%;
        padding: 0 8px;
      }
    }

    &__backup {
      &__checkbox {
        margin-left: 8px;

        &__label {
          white-space: initial;
        }
      }
    }

    &__tenant {
      mat-option .card__group-endpoint__row__tenant__option {
        height: 100%;
      }

      &__name {
        @include mat.typography-level($typography, subtitle-2);
      }

      &__description {
        padding: 0 0.75em 0 0.75em;
        @include mat.typography-level($typography, caption);
      }
    }
  }
}
